<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,html{
            height: 100%;
            overflow: hidden;
        }
        .box{
            box-sizing: border-box;
            width: 100px;
            height: 50px;
            line-height: 48px;
            text-align: center;
            font-size: 16px;
            border:1px solid lightblue;
            background: lightcyan;
        }
        /* 仅仅是水平居中：可以是margin: 0 auto; */
        /* 主要是position的三种形式 */
        /* 定位1*/
        /* body{
            position: relative;
        } */
        /* 问题:必须知道宽高的值；必须考虑进去 */
        /* .box{
            position:absolute;
            top:50%;
            left: 50%;
            margin-top:-25px;
            margin-left: -50px;
        } */
        /* 问题：必须有宽高，可以不需要考虑进去 
        没宽高的话，会显示100%,铺满父元素了*/
        /* .box{
            position:absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin:auto;
        } */
        /* 问题：兼容性都不是很好*/
        /* .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        } */

        /* 方案二 移动端经常用这个*/ 
        /* 沿着x轴 */ 
        /* 沿着y轴 */
        /* body{
            display: flex;
            justify-content: center; 
            align-items: center;
        } */
        /* 方案三  JS方法*/

        /* 方案4 talbe-cell*/
        /* 主要是控制文本的 */
        /* 弊端：要求必须是固定宽高，并且不能是100% */
        body {
            display:table-cell;
            vertical-align: middle;
            text-align: center;
            width:500px;
            height:400px;
            background:rgb(197, 54, 54);
        }
        .box {
            display: inline-block;
        }
    </style>
    
</head>
<body>
    <div class="box">
        居中的盒子
    </div>
    <script>
        // let HTML = document.documentElement,
        //     winw = HTML.clientWidth,
        //     winH = HTML.clientHeight,
        //     boxW = box.offsetWidth,
        //     boxH = box.offsetHeight;
        //  box.style.position = 'absolute'
        //  box.style.left = (winw -boxW)/2+'px';
        //  box.style.top = (winH-boxh)/2+'px';

    </script>
</body>
</html>